<template>
    <el-form :model="smsFormData" status-icon :rules="rules" ref="smsFormData" label-width="100px"
        class="demo-smsFormData">
        <el-form-item label="手机号" prop="phonenumber" class="number1 code">
            <el-input type="text" v-model="smsFormData.phonenumber" autocomplete="off" maxlength="11"></el-input>
            <div class="codeBox" v-text="msg" userSelect="none" @click="sendSms"></div>
        </el-form-item>
        <el-form-item label="验证码" prop="code" class="code">
            <el-input v-model.number="smsFormData.code" type="text" maxlength="5"></el-input>
            <div class="captchaBox"></div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm('smsFormData')">登录</el-button>
        </el-form-item>
    </el-form>
</template >
<script>
//引入短信登录的验证方式
import { validatePhonenumber, validateCode } from "../../utils/login/validate"
//引入手机短信验证码接口
import * as api from "@/api/users"
//引入存储data中需要的数据方法
import storage from "@/utils/storage"

export default {
    data() {
        return {
            smsFormData: {
                phonenumber: '',
                code: ''
            },
            rules: {
                phonenumber: [
                    { validator: validatePhonenumber, trigger: 'blur' }
                ],
                code: [
                    { validator: validateCode, trigger: 'blur' }
                ]
            },
            msg: '点击发送',
            flag: true
        };
    },
    //通过watch监听loginForm的变化
    watch: {
        smsFormData: {
            handler(newVal) {
                console.log(newVal);
            },
            deep: true
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    methods: {
        async sendSms() {
            if (this.flag) {
                this.flag = false;//关掉开关
                //调用接口，获取手机验证码
                let res = await api.getSmsCode(this.smsFormData.phonenumber)
                if (res.data.state) {
                    //短信发送成功
                    this.$message({
                        type: 'success',
                        message: '短信发送成功'
                    })
                } else {
                    this.$message.error(res.data.msg)
                }
                let delay = 5
                this.msg = `${delay}秒后发送`
                this.interval = setInterval(() => {
                    delay--
                    if (delay < 1) {
                        this.msg = '点击发送'
                        clearInterval(this.interval)
                        //将开关重新打开
                        this.flag = true
                    } else {
                        this.msg = `${delay}秒后发送`

                    }
                }, 1000)
            }

        },
        async submitForm() {
            let res = await api.smsApi(this.smsFormData.code)
            //调用存储信息的方法，存储用户信息
            this.storageUserInfo(res.data)
            //跳转页面
            this.$router.push('/home')
        },
        //封装一个方法，用用于存储用户信息、token和按钮权限
        storageUserInfo({ userInfo, token, permission }) {
            storage.set('userInfo', userInfo)
            storage.set('token', token)
            storage.set('permission', permission)
            let r = storage.get('userInfo')
            console.log(r);
        }
    }
}
</script>

<style lang="less" scoped>
/* 
1.打开调试器，找准类名，覆盖样式
2.看权重，使用！important
3.使用深度选择器 /deep/ 
*/

// 设置表单样式
//最外层的表单
.el-form {

    // 设置label标签颜色
    /deep/ .el-form-item__label {
        color: white
    }

    //设置内层所有输入框，，，设置宽度
    .el-input {
        width: 200px;
    }

    //内层第一个输入框，使之距离顶部50px
    .number1 {
        margin-top: 50px;

    }
}

//短信验证码的样式
.code {

    //最大的input框
    /deep/ .el-form-item__content {
        display: flex;

        // 输入框的宽度
        .el-input {
            width: 90px;

            // 去除输入框的默认样式
            .el-input__inner {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                border-right: 0;
                box-shadow: none;
            }
        }

        .captchaBox {
            box-shadow: none;
            margin-top: 0.8px;
            height: 38px;
            width: 109px;
            transition: var(--el-transition-box-shadow);
            background-color: white;
            border: 1px solid #DCDFE6;
            border-left: 0;
            border-radius: 0 4px 4px 0;

            // /deep/ svg {
            //     height: 32px;
            //     width: 110px;
            // }
        }
    }
}

//内层第一个输入框
.code {
    .el-input {
        width: 150px !important;

        /deep/ .el-input__wrapper {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            border-right: 0;
            box-shadow: none;
        }
    }

    .codeBox {
        margin-top: 1.47px;
        box-shadow: none;
        height: 39.8px;
        width: 100px;
        font-size: 14px;
        // box-shadow: 0 0 0 1px #dcdfe6;
        transition: var(--el-transition-box-shadow);
        background-color: white;
        border-left: 0;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
        text-decoration: underline;
        color: rgb(136, 136, 136);
        padding: 0 10px 0 0;
        user-select: none;

    }

}
</style>
